<template>
  <div class="tdData">
    <ProForm
      ref="formRef"
      :model="formState"
      :items="items"
      :onValuesChange="onValuesChange"
      :formColLayout="formColLayout()"
      class="pro-form-modal"
    >
      <template #button>
        <b-button icon="delete" @click="onDelete" code="clearDeviceTdData:list"
          >清除</b-button
        >
      </template>
    </ProForm>
  </div>
</template>
<script setup lang="tsx">
import { computed, nextTick, ref, shallowRef } from 'vue';
import { TreeSelect, message } from 'ant-design-vue';
import { ProForm, ProFormProps } from '@/components/ProForm';
import { listToEnum } from '@/utils/utils';
import { getProjectData } from '@/api/config';
import { getDictType } from '@/api/monitor';
import { saveRecord } from '@/api/notice';
import { clearDeviceTdData } from '@/api/system';

const typeEnum: any = ref();
const dictInit = () => {
  getDictType('device_operate_type').then((res) => {
    typeEnum.value = listToEnum(res.data as any, 'dictLabel', 'dictCode');
  });
};

dictInit();

const projectData = ref([]);
const formState = ref<Record<string, any>>({});

const processTreeData = (treeData: any) => {
  treeData.forEach((node: any) => {
    node.disabled = node.type == 1;
    if (node.children && node.children.length > 0) {
      processTreeData(node.children);
    }
  });
  return treeData;
};

const init = () => {
  getProjectData().then((res: any) => {
    projectData.value = processTreeData(res.data);
    console.log(projectData.value, 'projectData');
  });
};

init();
const items = computed<ProFormProps['items']>(() => {
  return [
    {
      label: '设备序列号',
      type: 'input',
      field: 'code',
      props: {
        placeholder: '请输入设备序列号',
      },
      hide: (state) => state.projectId || state.projectId == 0,
    },
    {
      label: '数据类型',
      type: 'select',
      field: 'type',
      props: {
        options: [
          { label: '全部', value: '0' },
          { label: '日志数据', value: '1' },
          { label: '状态数据', value: '2' },
        ],
        placeholder: '请选择数据类型',
      },
    },
    {
      label: '项目名称',
      type: 'input',
      field: 'projectId',
      props: {},
      hide: (state) => state.code,
      customRender: (state) => {
        return (
          <TreeSelect
            v-model:value={state.projectId}
            fieldNames={{ value: 'id' }}
            placeholder='请选择'
            treeData={projectData.value}
            allowClear={true}
          ></TreeSelect>
        );
      },
    },
    {
      type: 'input',
      field: 'button',
    },
  ];
});

const onValuesChange = (
  values: Record<string, any>,
  state: Record<string, any>,
) => {
  formState.value = {
    ...formState.value,
    ...state,
  };
};
const column = 6;
const formColLayout = () => {
  const num = 24 / column;
  return { xs: num, sm: num, md: num, lg: num };
};

const onDelete = async () => {
  if (!formState.value.type) return message.error('请选择设备或项目');
  if (!formState.value.code && !formState.value.projectId)
    return message.error('请选择设备或项目');
  if (formState.value.code) formState.value.code = [formState.value.code];
  const res = await clearDeviceTdData(formState.value);
  message.success(res.msg);
  if (formState.value.code) {
    saveRecordFn(
      formState.value,
      res,
      '清空日志',
      JSON.stringify(formState.value),
      '/device/clearDeviceTdData',
    );
  }
};

const saveRecordFn = async (
  item: any,
  res: any,
  operateButton: any,
  requestParam: any,
  operateUri: string,
) => {
  const list = [
    {
      deviceCode: item.code[0],
      operateModule: '平台管理/数据管理',
      requestParam,
      status: res.code == 200 ? 1 : 0,
      operateButton,
      operateType: typeEnum.value[operateButton],
      operateUri,
    },
  ];
  await saveRecord({ list });
};
</script>

<style scoped lang="scss">
.tdData {
  padding: 15px;
}
</style>
